{include file="public/header"/} {include file="public/navleft"/}

<style>
  .layui-input-inline {
    width: 100px;
  }
</style>
<div class="tpl-content-wrapper">
  <ol class="am-breadcrumb">
    <li><a href="#" class="am-icon-home">选择日期</a></li>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test1" placeholder="选择时间" />
      </div>
    </div>
  </ol>



  <div class="tpl-portlet-components">
    <div class="portlet-title">
      <div id="main" style="width: 1280px; height: 650px"></div>
      <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        draw(); //获取后端传来的json对象并绘图
        function draw(value) {
          var loadIndex = "";
          var names = []; //x轴：物品的名称
          var nums = []; //y轴：物品的销量
          $.ajax({
            type: "post",
            // async: true, //异步请求(默认也是异步)
            url: "/index.php/index/report/ApiGetReportConut", //请求发送到后台controller的地址
            data:{'datetime':value},
            dataType: "json", //返回数据形式为json
            beforeSend: function () {
              loadIndex = layer.msg("正在查询数据，请稍候……", {
                icon: 16,
                shade: 0.01,
                shadeClose: false,
              });
            },
            success: function (results) {
              //result参数是服务器返回的json对象，这个参数是自带的，名字随便起

              if (results != null) {
                console.log(results.data[0]["name"]);
                for (var i = 0; i < results.data.length; i++) {
                  names.push(results.data[i]["name"]);
                  nums.push(results.data[i]["num"]);
                }
                myChart.setOption({
                  //绘图
                  title: {
                    text: "当天新冠送检前十",
                  },
                  tooltip: {},
                  legend: {
                    data: ["统计"],
                  },
                  xAxis: {
                    data: names, //从后端传过来的，没有“写死”
                    axisLabel: {
                      interval: 0,
                      rotate: "45",
                      textStyle: {
                        color: "#000",
                        fontSize: 10,
                      },
                    },
                  },
                  grid: {
                    show: true, //是否显示直角坐标系网格。[ default: false ]
                    // left:"20%",grid 组件离容器左侧的距离。
                    // right:"30px",
                    borderColor: "#c45455", //网格的边框颜色
                    bottom: "20%", //
                  },

                  yAxis: {},
                  series: [
                    {
                      name: "统计",
                      type: "bar",
                      data: nums, //从后端传过来的，没有“写死”
                    },
                  ],
                });
                layer.close(loadIndex);
              }
            },
            error: function (errorMsg) {
              //请求失败时执行该函数
              layer.msg("查询失败", {
                icon: 16,
                shade: 0.01,
                shadeClose: false,
              });
            },
          });
        }
    
      </script>

<script>
    layui.use("laydate", function () {
      var laydate = layui.laydate;

      //常规用法
      laydate.render({
        elem: "#test1",
        trigger: "click", // 事件类型
        done: function (value, date, endDate) {   
          draw(value);
          // 回调函数
          $("#endDate").focus();
        },
      });
    });
  </script>


    </div>
  </div>

  {include file="public/footer"/}
</div>
